<template>
  <div>
    <el-select v-model="grouo" clearable filterable placeholder="请选择分组" @change="fungroup">
      <el-option
          v-for="item in grouos"
          :key="item"
          :label="item"
          :value="item">
      </el-option>
    </el-select>

    <el-button type="primary" plain @click="popup" style="float: right">添加单词</el-button>

  <el-table
      v-loading="loading"
        :default-sort="{props:['gtmModifide','word'],order:'descending'}"
        :data="note.filter(data => !search || data.word.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        max-height="800">
      <el-table-column
          :formatter="time"
          fixed
          sortable
          prop="gtmModifide"
          label="日期"
          width="200">
      </el-table-column>
      <el-table-column
          sortable
          prop="word"
          label="单词"
          width="150">
      </el-table-column>
      <el-table-column
          prop="translate"
          label="翻译"
          width="150">
      </el-table-column>
      <el-table-column
          prop="remake"
          label="备注"
          width="150">
      </el-table-column>
      <el-table-column
          prop="grouo"
          label="分组"
          width="100">
      </el-table-column>
      <el-table-column
          label="用户名"
          width="120">
        {{user}}
      </el-table-column>
      <el-table-column
          align="right"

          >
        <template slot="header" slot-scope="scope" v-model:scope="form1">
          <el-input
              v-model="search"
              size="mini"
              clearable
              placeholder="输入关键字搜索"/>
        </template>
        <template v-slot:default="scope" >
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="删除后不可恢复确定删除吗？"
              @confirm="deleteRow(scope.$index, note)"
          >
          <el-button
              slot="reference"

              type="text"
              size="small">
            移除
          </el-button>
          </el-popconfirm>
          <el-button @click="dialog(scope.$index)"
            type="text" size="small"
          >
            修改
          </el-button>

        </template>

      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="back"
          @next-click="next"
          :current-page.sync="pag.number"
          :page-size="pag.size"
          layout="prev, pager, next, jumper"
          :total="pag.total"
          :hide-on-single-page="true"
      >
      </el-pagination>

    </div>
    <NoteAlter v-model:dialog-form-visible="dialogFormVisible"  :grouos="grouos" :form1="note[index]" @from="fdata">

    </NoteAlter>
    <iput v-model:dialog="dialog1"  :grouos="grouos" @append="append"></iput>
  </div>
</template>

<script>
import axios from "axios";
import Qs from "qs";
import Iput from "@/components/Input"
import NoteAlter from "@/components/NoteAlter";

//用户表单
export default {
  name: "UserNote",
  components:{NoteAlter, Iput},
  methods:{
    fdata(x){
      this.note[this.index]=x
    },
    append(data){
      this.pag.total=this.pag.total+1
      this.note.unshift(data)
    },
    popup(){
      this.dialog1=true
    },
    dialog(index){

      this.index=index
      this.dialogFormVisible = true
    },
    fungroup(){
      axios({
        url:"/note/count/"+window.sessionStorage.getItem("ID")+"/"+this.grouo,
        method:"get"
      }).then(data=> {
        if (data.data.code===1000){
          this.pag=data.data.data;
          this.pars();
        }else {
          this.$message.error(data.data.msg);
        }

      })

    }
    ,
    async pars(){
      let par={uid:window.sessionStorage.getItem("ID"),grouo:this.grouo,
        total: this.pag.total,
        number: this.pag.number
      }
      await axios({
        url:"/note/page",
        method:"post",
        data:Qs.stringify(par)
      }).then(data=>{
        this.note=data.data.data;
        if (data.data.code!==1000){
          this.$message.error(data.data.msg)
          //强制刷新
          this.$forceUpdate()
          this.loading=false
        }else {
          this.note=data.data.data;
          this.loading=false
        }

      })
    },
    back(){
      this.loading=true
      this.pag.number-1;
      this.pars()
    },
    next(){
      this.loading=true
      this.pag.number+1;
      this.pars()
    },
    handleSizeChange(val) {
      this.loading=true
      this.pag.number=val;
      this.pars()
    },
    handleCurrentChange(val) {
      this.loading=true
      this.pag.number=val;
      this.pars()
    },
    time(row){
      return new Date(row.gtmModifide).toLocaleString();
    },
    deleteRow(index,note){
      axios({
          url:"/note/delete",
        method:"delete",
        data:note[index]
      }).then((data)=>{
        if(data.data.code===1000){
          this.note.splice(index,1)
          this.$message({
            message: data.data.msg,
            type: 'success'
          });
        }else {
          this.$message.error(data.data.msg);
        }
          }
      ).catch(()=>{
        this.$message.error('请求错误');
      })
    },


    },

  computed:{

  },
  data(){
    return{
      index:Number,
      user:window.sessionStorage.getItem("UserName"),

      loading:true
    ,
      dialog1:false,
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      note:[
      ],
      search:"",
      grouo:"",
      pag:{},
      grouos:[]
    }
  },
  mounted() {

    let id =window.sessionStorage.getItem("ID")
    axios({
      url:"/note/count/"+id,
      method:"get"
    }).then(data=> {
      if (data.data.code===1000){
      this.pag = data.data.data
      let par = {
        uid: id,
        grouo: this.grouo,
        total: this.pag.total,
        number: this.pag.number
      }
      axios({
        url: "/note/page",
        method: "post",
        data: Qs.stringify(par)
      }).then(data => {
        if (data.data.code === 1000) {
          this.note = data.data.data;
          // let set = new Set();
          // for(let i of data.data){
          //   set.add(i.grouo)
          // }
          // this.grouos=[...set]
          axios({
            url: `/plan/groups/${id}`
          }).then(data => {
            if (data.data.code===1000){
              this.grouos = data.data.data
            }else {
              this.$message.error(data.data.msg)
            }
          })
          this.loading = false
        }else {
          this.$message.error(data.data.msg)
          this.loading = false
        }
      }
      )
    }else {
        this.$message.error(data.data.msg)
        this.loading = false
      }
    }).catch(()=>{
      this.$message.error("请求异常")
      this.loading = false
    })


  },
  // watch:{
  //   note:function (x,y){
  //
  //     this.$forceUpdate()
  //   }
  // }
}
</script>

<style scoped>
  body{ margin: 0;}
</style>